<template>
  <div @touchmove.stop @touchmove.prevent class="container w-p100 h-p100">
    <div class="box w-p100 h-p100">
      <div class="icon icon-logo-loading" :style="{'background-image': 'url('+logoLoading+')'}"></div>
      <div class="icon icon-loading" :style="{'background-image': 'url('+bus+')'}"></div>
      <div class="icon icon-loading-shadow" :style="{'background-image': 'url('+busShadow+')'}"></div>
      <div class="loading-text box ">
        <div>正在开往长沙 IFS美食之城&nbsp;</div>
        <div class="ani"> . . .</div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'pageLoading',
  data () {
    return {
      logoLoading: require('../assets/images/icon-logo.png'),
      bus: require('../assets/images/icon-loading.gif'),
      busShadow: require('../assets/images/icon-bus-shadow.png')
    }
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.container{
  position: fixed;
  left:0;
  top:0;
  z-index:999;
  background:-webkit-gradient(linear, 0 0, 0 bottom, from(#1d103b), to(#52226d));
}
.icon-logo-loading{
  position: absolute;
  left:.37rem;
  top:.44rem;
  width:1.1rem;
  height:1.11rem;
}
.icon-loading{
  position: absolute;
  z-index:2;
  left:1.8rem;
  top:3.7rem;
  width:3.64rem;
  height:3.27rem;
}
.icon-loading-shadow{
  position: absolute;
  left:1.95rem;
  top:3.6rem;
  width:3.6rem;
  height:3.6rem;
}
.loading-text{
  position: absolute;
  left:1.5rem;
  top:7.94rem;
  color:#FFF;
  font-size:.36rem;
  text-align: center;
  width:100%;
  width:5rem;
}
.ani{
  animation: sanshuo 1.5s linear infinite;
  white-space:nowrap;
  overflow: hidden;
}
@keyframes sanshuo {
  0% {
    width:0;
  }
  100% {
    width:.5rem;
  }
}
</style>
